<template>
	<view>
		<form @submit="formSubmit">
			<view>
				<view class="container-rent">
					<!-- 标题 -->
					<view class="title">
						<input type="text" placeholder="你要发布什么呢" :value="inputTitle" maxlength="15" @input="getTitle"
							name="title">
					</view>
					<!-- 编辑内容 -->
					<view class="content">
						<textarea placeholder="请结合上传的图片,介绍一下你的宝贝" :value="inputContent" @input="getContent"
							name="content"></textarea>
					</view>
					<!-- 添加图片 -->
					<view class="img_box">
						<view class="imgShow" v-for="(item, index) in tempFilePath" :key="item.id">
							<image :src="item" mode="aspectFill" @click="showImg" :data-index="index"
								@longpress="deleteImage">
							</image>
						</view>
						<view class="imgAddBox">
							<view class="imgAdd" @click="photo()" v-if="tempFilePath.length < 9">
								<text>+</text>
							</view>
						</view>
					</view>
					<!-- 你在哪？ -->
					<view class="where-icon" @click="chooseLocation">
						<input type="text" placeholder="你在哪里" placeholder-class="wherePlaceholder" :value="localName"
							@input="onKeyInputLocalName" disabled="true" name="address">
					</view>
					<!-- 下面那条线 -->
					<view class="line">

					</view>
					<view class="price">
						<view class="img">
							<image
								src="cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/money1.png"
								mode=""></image>
						</view>

						<text>预期价格</text>
						<view class="err">!请输入价格</view>
						<!-- 输入价格 -->
						<view class="inputPrice">
							<text>￥</text>
							<input class="priceInp" :value="inputPrice" type="number"
								:style="'width:'+String(inputPrice).length*10+'px;max-width:90rpx;font-weight: 600;color: red;text-align: left'"
								@input="getInputPrice" @blur="lostFouce" placeholder="0.00"
								placeholder-style="color:red" name="price">
						</view>
					</view>
					<!-- 发送 -->
					<button form-type="submit" class="map-icon" @click="toSet">
						<image :src="setImg" mode=""></image>
					</button>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	wx.cloud.init({
		env: 'klausjins-0go3socwd767ad11'
	})
	const db = wx.cloud.database()
	export default {
		name: "plusrent",
		props: ['userOpenid'],
		data() {
			return {
				//页面类型，是talk，freetake，rent，run中的一个
				plus: 'rent',
				//标题内容
				inputTitle: '',
				//正文内容
				inputContent: '',
				//位置选择地名
				localName: '',
				//输入价格
				inputPrice: null,
				//图片地址存储
				tempFilePath: [],
				//发送按钮默认灰色
				setImg: 'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly1.png'
			};
		},
		methods: {
			formSubmit(res) {
				console.log(res);
			},
			getTitle(e) {
				let text = e.detail.value;
				this.inputTitle = text;
				if (this.inputTitle != '' && this.inputContent != '' && this
					.localName != '' && this
					.tempFilePath
					.length !== 0 && this.inputPrice != null) {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly2.png'
				} else {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly1.png'
				}

			},
			getContent(e) {
				let text = e.detail.value;
				this.inputContent = text;
				if (this.inputTitle != '' && this.inputContent != '' && this
					.localName != '' && this
					.tempFilePath
					.length !== 0 && this.inputPrice != null) {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly2.png'
				} else {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly1.png'
				}
			},
			onKeyInputLocalName(e) {
				let text = e.detail.value;
				this.localName = text;
				if (this.inputTitle != '' && this.inputContent != '' && this
					.localName != '' && this
					.tempFilePath
					.length !== 0 && this.inputPrice != null) {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly2.png'
				} else {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly1.png'
				}
			},
			showImg(e) {
				var index = e.currentTarget.dataset.index;
				//点击预览图片
				console.log(index);
				uni.previewImage({
					current: index,
					urls: this.tempFilePath,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data
								.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			getInputPrice(e) {
				let text = e.detail.value;
				this.inputPrice = text
				if (this.inputTitle != '' && this.inputContent != '' && this
					.localName != '' && this
					.tempFilePath
					.length !== 0 && this.inputPrice != null) {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly2.png'
				} else {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly1.png'
				}

			},
			lostFouce(e) {
				if (this.inputPrice == '' || this.inputPrice == '0') {
					this.inputPrice = null
				}
			},
			photo: function() {
				var that = this;
				uni.chooseImage({
					count: 9 - this.tempFilePath.length,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'], //camera 拍照 album 相册
					success: res => {
						//压缩图片后修改本地tempFilePath
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							uni.compressImage({
								src: res.tempFilePaths[i],
								quality: 20,
								success: res => {
									console.log(res.tempFilePath);
									let tempFilePaths = res.tempFilePath
									that.tempFilePath = that.tempFilePath.concat(tempFilePaths)
									//上传到云数据库
									//上传的文件在云存储的plus的user文件夹中，以时间戳命名
									//将临时变量赋值给已经在data中定义好的变量
									//通过concat来拼接获取到的tempFilePaths
									//concat：把tempFilePaths拼接到that.tempFilePath，此处的that.tempFilePath指的就说data中的tempFilePath
									if (that.titleContent != '' && that.content != '' && that
										.inputTxt != '' && that
										.tempFilePath
										.length !== 0) {
										this.setImg =
											'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly2.png'
									} else {
										this.setImg =
											'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly1.png'
									}
								}
							})
						}


					}
				})
			},
			toSet: function() {
				var that = this;
				var images = that.tempFilePath
				//点击发送图标后的事件
				// db.collection('plus_info').get().then(res => {
				// 	// res.data 包含该记录的数据
				// 	console.log(res.data)
				// })
				//先判断，有问题的就不能点，没问题就可以上传
				if (that.inputTitle == '' && that.inputContent == '' && that.localName == '' &&
					that.inputPrice ==
					null && that.tempFilePath.length === 0) {
					uni.showToast({
						icon: "error",
						title: "请完善信息",
						duration: 2000
					})
				} else {
					//上传图片到云存储
					wx.showLoading({
						title: '上传中',
					})
					let promiseArr = [];
					for (let i = 0; i < that.tempFilePath.length; i++) {
						promiseArr.push(new Promise((reslove, reject) => {
							let item = that.tempFilePath[i];
							//let suffix = /\.\w+$/.exec(item)[0]; //正则表达式返回文件的扩展名
							wx.cloud.uploadFile({
								//需要重命名
								cloudPath: "plus/user/" + that.userOpenid + " plusRent " + Date
									.now() + i +
									".jpg", // 上传至云端的路径
								filePath: item, // 小程序临时文件路径
								success: res => {
									console.log(res.fileID) //输出上传后图片的返回地址
									reslove();
									wx.hideLoading();
									wx.showToast({
										title: "上传成功",
									})
								},
								fail: res => {
									wx.hideLoading();
									wx.showToast({
										title: "上传失败",
									})
								}

							})
						}));
					}
					//console.log( th.userInfo._openid );   
					//console.log(that.data.tempFilePaths);
					//处理结束后再把images赋给tempFilePathsClou
					//上传成功
					db.collection('plus_info').add({
						data: {
							plus: that.plus,
							title: that.inputTitle,
							content: that.inputContent,
							image: that.tempFilePath,
							local: that.localName,
							firstImg: that.tempFilePath[0]
						}
					}).then(res => {
						console.log(res);
						uni.showToast({
							title: "发布成功！",
							duration: 2000
						})
						setTimeout(function() {
							that.titleContent = '',
								that.content = '',
								that.inputTxt = '',
								that.tempFilePath = [],
								that.localName = ''
							// wx.reLaunch({
							//   url: '在此处设置跳转页面,记得在250行结尾加逗号',
							// })
						})
					})
				}

			},
			chooseLocation: function() {
				var that = this;
				uni.chooseLocation({
					success: function(res) {
						if (res.name != '') {
							that.localName = res.name;
						} else {
							that.localName = '你在哪里'
						}
						if (that.inputTitle != '' && that.inputContent != '' && that
							.localName != '' && that
							.tempFilePath
							.length !== 0 && that.inputPrice != null) {
							that.setImg =
								'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly2.png'
						} else {
							that.setImg =
								'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly1.png'
						}
					}
				});
			},
			deleteImage: function(e) {
				var that = this;
				var index = e.currentTarget.dataset.index; //获取当前长按图片下标
				uni.showModal({
					title: '提示',
					content: '确定要删除此图片吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('点击确定了');
							that.tempFilePath.splice(index, 1);
						} else if (res.cancel) {
							console.log('点击取消了');
							return false;
						}
						if (that.inputTitle != '' && that.inputContent != '' && that
							.localName != '' && that
							.tempFilePath
							.length !== 0 && that.inputPrice != null) {
							that.setImg =
								'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly2.png'
						} else {
							that.setImg =
								'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly1.png'
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.container-rent {
		background-color: #fff;
		border-radius: 35rpx 35rpx 0 0;
		width: 100%;
		overflow: hidden;
		min-height: 90vh;

		.title {
			display: flex;
			margin-left: 16rpx;
			padding-left: 20rpx;
			padding-bottom: 24rpx;
			border-bottom: 4rpx solid #bababa;
			margin-right: 16rpx;

			input {
				margin-top: 40rpx;
				width: 700rpx;
			}
		}

		.content {
			display: flex;
			width: 700rpx;
			overflow: hidden;
			height: 30vh;
			margin-left: 16rpx;
			padding-left: 20rpx;
			margin-top: 24rpx;

			textarea {
				width: 700rpx;
			}
		}

		.where-icon {
			display: flex;
			width: 176rpx;
			height: 48rpx;
			margin-top: 6vh;
			border-radius: 10px;
			margin-left: 42rpx;
			background-color: #d8d8d8;

			.wherePlaceholder {
				font-size: 12px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: center;
			}

			input {
				font-size: 12px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: center;
			}
		}

		.line {
			width: 72s0rpx;
			margin-left: 16rpx;
			margin-top: 16rpx;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
			border: 1rpx solid #d8d8d8;
		}

		.price {
			display: flex;
			position: absolute;
			width: 720rpx;
			height: 40rpx;
			margin-left: 16rpx;

			.img {
				display: flex;

				image {
					display: flex;
					width: 40rpx;
					height: 40rpx;
				}
			}

			text {
				display: flex;
				align-items: center;
				margin-right: 0rpx;
				font-size: 12px
			}

			.err {
				position: absolute;
				left: 130rpx;
				display: none;
				width: 120rpx;
				margin-top: 4rpx;
				font-size: 12px;
				color: red;

			}

			.inputPrice {
				display: flex;
				text-align: right;
				position: absolute;
				justify-content: center;
				left: 620rpx;

				text {
					display: flex;
					color: red;
					justify-content: flex-end;
					font-weight: 600;
				}

				.priceInp {
					text-align: right;
				}

				view {
					display: flex;
					float: right;
					margin-right: 16rpx;
					font-weight: 600;
					color: red;
					margin-top: -45rpx;
				}
			}
		}

		.NoneInp {
			display: flex;
			color: red;
		}



		.imgAddBox {
			display: flex;
			width: 33%;
			overflow: hidden;

		}

		.imgAddBox .imgAdd {
			display: flex;
			width: 160rpx;
			height: 160rpx;
			border: 6rpx dashed #C7C2C2;
			border-radius: 20rpx;
			align-items: center;
			justify-content: center;
			color: #C7C2C2;
			margin-left: 40rpx;
			font-size: 30px;
		}

		.imgShow {
			display: flex;
			float: left;
			width: 33%;
			height: 246rpx;
			justify-content: center;

			image {
				display: flex;
				width: 170rpx;
				height: 170rpx;
				border-radius: 20rpx;
			}
		}

		button {
			margin: 0;
			border: 0;
			height: 120rpx;
			margin-top: 227rpx;
			background-color: #fff;
		}

		button::after {
			border: none;
		}

		.map-icon {
			display: inline;
			float: right;
			border: none;

			image {
				width: 108rpx;
				height: 108rpx;
			}
		}

		.lastMuen {
			width: 750rpx;

			ul {
				display: flex;
				margin-top: 44rpx;
				margin-left: 72rpx;

				li {
					display: flex;
					margin-right: 116rpx;

					image {
						width: 64rpx;
						height: 64rpx;
					}
				}
			}
		}

	}
</style>
